<script>
import zfb from '../assets/zfb.png'
import AsideCom from '@/components/AsideCom.vue'
import { Fold,Expand} from '@element-plus/icons-vue'
//用辅助函数导入数据
import { mapState, mapMutations} from 'vuex';
import {routes} from '@/router'
export default{
  data() {
    //侦听器调用前创建调用遍历函数
    this.routesMap=new Map(),

    this.initRoutesMap(routes)

    return {
      zfb,
      collapse:false,
      list:[]
    }
  },
  methods: {
    ...mapMutations(['changeUserInfo']),
    //退出登录
    logoutClick(){
      this.changeUserInfo({})
      this.$router.push('/login')
    },
    //登录
    loginClick(){
      //js中页面跳转
      this.$router.push('/login')
    },

    //路径格式化
    initRoutesMap(routes){
      routes.forEach(route=>{
        // console.log(route);
        this.routesMap.set(route.name,route.label)
        //如果有子路径则进行递归
        if(route.children){
          this.initRoutesMap(route.children)
        }
      })
      // console.log(this.routesMap);
    },
  },
  components:{
    AsideCom,
    Fold,
    Expand
  },
  computed:{
    //通过辅助函数方式映射全局数据
    ...mapState(['userInfo']),
    icom(){
      return this.collapse?'Expand':'Fold'
    },
    calwidth(){
      return this.collapse?'64px':'200px'
    }
  },
  watch:{
    $route:{
      immediate:true,
      handler(newRoute){
        console.log(newRoute.matched);
        this.list=newRoute.matched.map(item=>{
          return{
            name:item.name,
            label:this.routesMap.get(item.name)
          }
        })
        console.log(this.list);
      }
    }
  } 
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 左边部分 -->
      <el-aside :width="calwidth">
        <!-- 标题 -->
        <div class="logo-box">
          <el-image :src="zfb"/>
          <h2 v-show="!collapse">后台管理系统</h2>
        </div>
        <!-- 菜单 -->
        <AsideCom :collapse="collapse"/>
       </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          
          <el-icon @click="collapse=!collapse" size="30"><component :is="icom" /></el-icon>
          <div>
            <!-- 未登录 -->
            <!-- {{$store.state.userInfo.adminname}} -->
            {{ userInfo.adminname? '欢迎'+userInfo.adminname:'未登录' }}
            <el-button v-if="!userInfo.adminname" @click="loginClick">请登录</el-button>
            <el-button v-else @click="logoutClick">退出登录</el-button>
          </div>
        </el-header>
        <!-- 内容 -->
        <el-main>

            <!-- 面包屑 -->
          <el-breadcrumb separator=">" style="margin-bottom:20px">
          <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>账号管理</el-breadcrumb-item> -->
          <el-breadcrumb-item :to="{ name: item.name }" v-for="item in list":key="item.name">{{ item.label }}</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 二级路由出口 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style lang="scss" scoped>
  $a:#f66;
  .el-container{
    background-color: $a;
    .el-aside{
    background-color:rgb(43, 171, 113); 
    
    .logo-box{
      height: 60px;
      display: flex;
      align-items: center;
      .el-image{
        width: 32px;
        height: 32px;
        margin: 0 12px
      }
      h2{
        font-size: 16px;
      }
    }

    // &:hover{
    //   background-color: red;
    // }
    }
    .el-header{
    background-color: rgb(78, 96, 196);
    display: flex;
    align-items: center;
    justify-content: space-between;
    div{
      display: flex;
      align-items: center;
      .el-button{
        margin: 0 10px
      }
    }
    }
    .el-main{
      background-color: azure;
    }
  }
  
 
</style>     